<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    
    <form action="./target.html">
    
        文本框 <input type="text" name="username">

        <br><br>
        <!-- 
            密码框使用input来创建，
                它的type属性是password

         -->
        密码框 <input type="password" name="password">

        <br><br>

        <!-- 
            单选按钮
            使用input来创建单选按钮，
                它的type属性是radio

            选择按钮通过name属性进行分组的，
                name相同则属于同一组按钮
            
            像这种不需要用户填写的选择框，
                还必须指定一个value属性
                value属性的值最终会提交给服务器

            可以通过checked属性来设置默认选中
         -->
        性别 <input name="gender" type="radio" value="male"> 男
            <input name="gender" type="radio" value="female" checked> 女

        <br><br>
         <!-- 
            多选框
            使用input创建多选框，
                它的type属性是checkbox
          -->
        爱好 <input type="checkbox" name="hobby" value="ppq"> 乒乓球
        <input type="checkbox" name="hobby" value="ymq"> 羽毛球
        <input type="checkbox" name="hobby" value="zq" checked> 足球
        <input type="checkbox" name="hobby" value="lq" checked> 篮球
        

        <br><br>
        <!-- 
            下拉列表
                - 使用select创建一个下拉列表
                - 在select中使用option来添加列表项
            
                下拉列表的name属性需要指定给select
                value属性需要指定给option

                通过selected来设置默认选项
         -->
         你最喜欢的老师
         <select name="teacher">
             <option value="li">李老师</option>
             <option selected value="chao">超哥</option>
             <option value="lichao">立超老师</option>
         </select>

        <br><br>

        <input type="submit" value="提交">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button" value="按钮">

        <br><br>

        <!-- 
            button也可以用了创建按钮
                type值同样也有三个
                    submit
                    reset
                    button

         -->
        <button type="submit">提交~</button>
        <button type="reset">重置~</button>
        <button type="button">按钮~</button>
        <button type="button">
            <img src="./img/an.jpg">
        </button>
    
    </form>

</body>
</html>